<!--
 * @description 课程列表组件
 * @author zhanghuan
 * @date 2022/11/12
 -->
<template>
  <div
    class="courseListComp-page"
    :style="{
      'padding-top':top,
      paddingLeft: spacing,
      paddingRight: spacing,
    }"
  >
    <van-pull-refresh
      v-model="isLoading"
      @refresh="refresh4other"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        :immediate-check="false"
        :offset="20"
        @load="onLoad"
      >
        <template v-if="isWaterfall && isInitData">
          <div
            v-masonry
            transition-duration="0s"
            class="masonry-list-box"
            item-selector=".box-item"
            :fit-width="false"
            :gutter="6"
          >
            <div
              v-for="(item, index) in list"
              :key="index"
              v-masonry-tile
              class="box-item"
              @click="toDetail(item)"
            >
              <div class="item-img">
                <van-image :src="setImgPath(item.courseImg, item.courseImgUrl)" :fit="option.fit">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="../../images/base/error-icon.png" alt>
                  </template>
                </van-image>
              </div>
              <div class="item-bottom">
                <div class="item-title">
                  <span>{{ item.courseName }}</span>
                </div>
                <div class="item-desc">
                  <span>{{ item.courseIntroduce }}</span>
                </div>
                <!-- <div class="item-number">
                 <span>浏览人次：{{item.pageview || 0}}</span>
                </div> -->
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div
            class="list-box"
          >
            <div
              v-for="(item, index) in list"
              :key="index"
              class="box-item"
              @click="toDetail(item)"
            >
              <div class="item-img">

                <van-image :src="setImgPath(item.courseImg, item.courseImgUrl)" :fit="option.fit">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="../../images/base/error-icon.png" alt>
                  </template>
                </van-image>
              </div>
              <div class="item-bottom">
                <div class="item-title etc">
                  <span>{{ item.courseName }}</span>
                </div>
                <div class="item-desc">
                  <span>{{ item.courseIntroduce }}</span>
                </div>
                <!-- <div class="item-number">
                 <span>浏览人次：{{item.pageview || 0}}</span>
                </div> -->
              </div>
            </div>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import mixins from './../mixins'

const defImg = ''
// import defImg from '../../images/answerRank/answer_cbg1.png'
export default {
  name: 'CourseListComp',
  mixins: [mixins],
  inject: ['footerHeight'],
  props: {
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      list: [], // 列表数据
      /** 接口参数 start */
      active: 1, // 课程所属 0 平台 1 企业
      page: 1,
      pageSize: 10,
      courseName: '',
      courseLabel: '',
      courseClassify: '',
      newest: false,
      hot: false,
      type: ''
      /** 接口参数 end */
    }
  },
  computed: {
    isWaterfall() {
      console.log()
      return this.option.isWaterfall || false
    }
  },
  async created() {
    if (this.isInitData) {
      if (this.$route.query.t === '0') {
        this.active = 0
      } else {
        this.active = 1
      }
      this.seflLoadData()
    } else {
      this.finished = true
      this.list = [
        {
          id: 'da9f5c22-67f3-46b6-b7c7-3d69ea754256',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 210,
          courseImgUrl: defImg,
          learnNum: 11,
          bid: '1'
        },
        {
          id: '6baeac8b-8502-4b81-9d4b-de537c378ffc',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 111,
          courseImgUrl: defImg,
          learnNum: 18,
          bid: '1'
        },
        {
          id: 'f08e45c2-552b-48f7-ac4f-2340dd68089b',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 79,
          courseImgUrl: defImg,
          learnNum: 8,
          bid: '1'
        },
        {
          id: '0e821f88-60d3-4272-8077-8dc71f8a1141',
          courseName: '标题标题标题',
          courseIntroduce: '描述信息描述信息描述信息',
          pageview: 58,
          courseImgUrl: defImg,
          learnNum: 15,
          bid: '1'
        }
      ]
    }
  },
  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      this.loading = false
      this.isLoading = false
      this.finished = false
      if (result !== 'error') {
        const { dataList4platform, dataList4company } = result
        const res = dataList4platform || dataList4company
        const { rows, total } = res.data || {}
        this.list.push(...rows)
        this.isNoData = total < 1
        if (this.isNoData) {
          this.finishedText = ''
        } else {
          this.finishedText = '已经到底了'
        }
        if (this.list.length >= total) {
          this.finished = true
        } else {
          this.finished = false
        }
      }
    },

    /**
     * 加载数据
     */
    async seflLoadData() {
      this.type = this.newest
        ? 'zuixin'
        : this.hot
          ? 'zuire'
          : this.courseClassify === ''
            ? 'zuire'
            : ''
      this.active === 0
        ? await this.getDataByCode('dataList4platform')
        : await this.getDataByCode('dataList4company')
    },

    /**
     * 刷新
     */
    refresh4other() {
      return new Promise((sesolve, reject) => {
        this.finished = true
        this.page = 1
        this.list = []
        this.seflLoadData()
        return new Promise(() => {
        })
      })
    },

    /**
     * 上拉加载
     */
    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.seflLoadData()
      } else {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';

.courseListComp-page {
  position: relative;
  width: rem(750);

  .van-pull-refresh {
    .box-item {
      width: rem(342);
      // height: rem(300);
      background: #ffffff;
      border-radius: rem(12);
      margin-bottom: rem(20);
      padding-bottom: rem(20);
      position: relative;

      .item-img {
        width: rem(342);
        height: rem(180);
        margin: 0 auto;
        position: relative;
        /* img {
           position: relative;
           height: 100%;
           width: 100%;
           border-radius: rem(16) rem(16) 0 0;
         }*/
        .van-image {
          width: 100%;
          height: 100%;
          border-radius: rem(12) rem(12) 0 0;
          overflow: hidden;
          .van-image__img {
            border-radius: rem(12) rem(12) 0 0;
          }

          .van-image__error {
            border-radius: rem(12) rem(12) 0 0;

            img {
              width: rem(120);
              height: rem(120);
            }
          }
        }
      }

      .item-bottom {
        margin-left: rem(15);

        .item-title {
          line-height: 1.5;
          font-size: rem(30);
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: bold;
          text-align: left;
          color: #333333;
          margin-top: rem(15);
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
        }

        .item-desc {
          font-size: rem(24);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #999999;
          margin-top: rem(15);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .item-number {
          font-size: rem(24);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #999999;
          margin-top: rem(15);
        }
      }
    }

    .masonry-list-box {

    }

    .list-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

    }
  }
}

</style>
